<!DOCTYPE html>
<html>
	<head>
		<title>VueX3</title>
		<!--  <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vuex@4.0.2/dist/vuex.global.js"></script> -->
		<script src="./js/vue-3.2.20.js"></script>
		<script src="./js/vuex-4.0.2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- Your Vuex example goes here -->
		</div>

		<script>
			// 创建一个 Vuex 实例
			const store = Vuex.createStore({
				state() {
					return {
						msg: 11,
						count: 0
					}
				},
				mutations: {
					increment(state) {
						state.count++;
					},
					jian(state) {
						state.msg--;
					}
				},
				actions: {
					incrementAsync({
						commit
					}) {
						setTimeout(() => {
							commit('increment');
						}, 1000);
					}
				},
				getters: {
					doubleCount(state) {
						return state.count * 2;
					}
				}
			});

			// 创建 Vue 应用程序
			const app = Vue.createApp({
				computed: {
					count() {
						return this.$store.state.count;
					},
					doubleCount() {
						return this.$store.getters.doubleCount;
					},
					msg() {
						return this.$store.state.msg;
					}
				},
				methods: {
					dojian() {
						this.$store.commit('jian');
					},
					increment() {
						this.$store.commit('increment');
					},
					incrementAsync() {
						this.$store.dispatch('incrementAsync');
					}
				},
				template: `
        <div>
          <p>Count: {{ count }}</p>
          <p>Double Count: {{ doubleCount }}</p>
          <p>{{msg}}</p>
          <button @click="increment">Increment</button>
          <button @click="incrementAsync">Increment Async</button>
          <button @click="dojian">减</button>
        </div>
      `
			});
			
			console.log({
				"app": app,
				"store": store,
			})

			app.use(store); // 注册 Vuex 实例

			app.mount('#app'); // 挂载应用程序
		</script>

	</body>
</html>